import React from 'react';
import { FirstHeaderC, MyEcharts } from '../../components';

class AreaChartsCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          value: 10,
          name: '股票',
          children: [
            {
              value: 1380,
              name: '平安大华-股票',
            },
            {
              value: 2140,
              name: '一号产品-股票',
            },
            {
              value: 2140,
              name: '二号产品-股票',
            },
            {
              name: '三号产品-股票',
              value: 3214,
            },
          ],
        },
        {
          value: 10,
          name: '债券',
          children: [
            {
              value: 1660,
              name: '债券一号',
              children: [
                {
                  value: 1660,
                  name: '债券二号',
                },
                {
                  name: '债券二号-1',
                  value: 415,
                },
                {
                  name: '债券二号-2',
                  value: 652,
                },
              ],
            },
            {
              name: '债券一号-1',
              value: 415,
            },
            {
              name: '债券一号-2',
              value: 652,
            },
          ],
        },
        {
          value: 20,
          name: '基金',
          children: [
            {
              name: '基金-1',
              value: 17090,
            },
            {
              name: '基金-2',
              value: 9967,
            },
            {
              name: '基金-3',
              value: 91409,
            },
            {
              name: '基金-4',
              value: 109,
            },
          ],
        },
      ],
    };
  }

  render() {
    return (
      <div>
        <FirstHeaderC title='我的echarts图' />
        <MyEcharts series={this.state.data} />
        <FirstHeaderC title='我的echarts图/自定义悬浮显示' />
        <MyEcharts series={this.state.data} toolTipFormat={(params) => `${params.name}`} />
      </div>
    );
  }
}

export default AreaChartsCDemo;
